<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <link rel="stylesheet" type="text/css" href="/admin/static/h-ui/css/H-ui.min.css" />
    <link rel="stylesheet" type="text/css" href="/admin/static/h-ui.admin/css/H-ui.admin.css" />
    <link rel="stylesheet" type="text/css" href="/admin/lib/Hui-iconfont/1.0.8/iconfont.css" />
    <link rel="stylesheet" type="text/css" href="/admin/static/h-ui.admin/skin/default/skin.css" id="skin" />
    <link rel="stylesheet" type="text/css" href="/admin/static/h-ui.admin/css/style.css" />
    <link rel="stylesheet" type="text/css" href="/webuploader/webuploader.css" />

    <title>添加房东 - 房东管理 - H-ui.admin v3.1</title>
</head>
<body>
<article class="page-container">
    {{-- 表单验证提示 --}}

    <form  class="form form-horizontal" action="{{ route('admin.fangowner.update') }}"  id="form-admin-add">
        @include('admin.common.validate')
        {{ csrf_field() }}

        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>姓名：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <input type="text" class="input-text" name="name"/>
            </div>
        </div>

        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>性别：</label>
            <div class="formControls col-xs-8 col-sm-9 skin-minimal">
                <div class="radio-box">
                    <input name="sex" type="radio" value="先生" checked>
                    <label for="sex-1">先生</label>
                </div>
                <div class="radio-box">
                    <input type="radio" value="女士" name="sex">
                    <label for="sex-2">女士</label>
                </div>
            </div>
        </div>

        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>年龄：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <input type="text" class="input-text" name="age"/>
            </div>
        </div>

        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>手机号码：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <input type="text" class="input-text" name="phone"/>
            </div>
        </div>

        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>邮箱：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <input type="text" class="input-text" name="email"/>
            </div>
        </div>

        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>地址：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <input type="text" class="input-text" name="address">
            </div>
        </div>

        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>身份证码：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <input type="text" class="input-text" name="card"/>
            </div>
        </div>

        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>身份证照片：</label>
            <div class="formControls col-xs-2 col-sm-2">
                <div id="picker">身份证照片</div>
                <span>正面、反面、手持</span>
            </div>
            <div class="formControls col-xs-6 col-sm-7">
                <!-- 表单提交时，上传图片地址，以#隔开 -->
                <input type="hidden" name="pic" id="pic"/>
                <!-- 显示上传成功后的图片容器 -->
                <div id="imglist"></div>
            </div>
        </div>



        <div class="row cl">
            <div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-3">
                <input class="btn btn-primary radius" type="submit" value="&nbsp;&nbsp;添加属性&nbsp;&nbsp;">
            </div>
        </div>
    </form>
</article>

<!--_footer 作为公共模版分离出去-->
<script type="text/javascript" src="/admin/lib/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="/admin/lib/layer/2.4/layer.js"></script>
<script type="text/javascript" src="/ueditor/ueditor.config.js"></script>
<script type="text/javascript" src="/ueditor/ueditor.all.js"></script>
<script type="text/javascript" src="/webuploader/webuploader.js"></script>
<script type="text/javascript" src="/admin/static/h-ui/js/H-ui.min.js"></script>
<script type="text/javascript" src="/admin/static/h-ui.admin/js/H-ui.admin.js"></script> <!--/_footer 作为公共模版分离出去-->

<!--请在下方写此页面业务相关的脚本-->
<script type="text/javascript" src="/admin/lib/jquery.validation/1.14.0/jquery.validate.js"></script>
<script type="text/javascript" src="/admin/lib/jquery.validation/1.14.0/validate-methods.js"></script>
<script type="text/javascript" src="/admin/lib/jquery.validation/1.14.0/messages_zh.js"></script>
<script type="text/javascript">


    $("#form-admin-add").validate({
        rules:{
            name:{
                required:true,
                maxlength:30
            },
            card:{
                required:true,
                minlength:18,
                maxlength:19
            },
            email:{
                email:true
            },
        },
        onkeyup:false,
        focusCleanup:true,
        success:"valid",
        submitHandler: function (form) {
            // 表单提交地址
            let url = $(form).attr('action');
            // 表单序列化   _token=aaa&name=fewflew
            let data = $(form).serialize();

            // jquery post提交
            $.ajax({
                url,
                data,
                type:'put'
            }).then(({status,msg})=>{
                if(status == 0){
                    layer.msg(msg,{icon:1,time:2000},()=>{
                        var index = parent.layer.getFrameIndex(window.name);
                        parent.$('.btn-refresh').click();
                        parent.layer.close(index);
                    })
                }else{
                    layer.msg(msg,{icon:2,time:2000})
                }
            })
        }
    });


    //文件上传
    var uploader = WebUploader.create({
        //自动上传
        auto:true,
        //swf路径
        swf:'/webuploader/uploader.swf',
        server:'{{ route('admin.fangowner.upfile') }}',
        formData:{
            _token:'{{ csrf_token() }}'
        },
        //文件表单名称
        fileVal:'file',
        pick:{
            id:'#picker',
            //是否上传多个
            multiple:true
        },
        //压缩
        resize:true
    });


    //上传成功回调
    uploader.on('uploadSuccess', function (file, ret) {
        // 解决表单提交时，图片以#隔开解决
        let val = $('#pic').val();
        let tmp = val + '#' + ret.url;
        $('#pic').val(tmp);
        // 图片显示
        let imglist = $('#imglist');
        // 注：一定要用追加还是不html覆盖
        let html = `
            <div style="position: relative;;width:100px;">
                <img src="${ret.url}" style="width:100px;" />
                <strong onclick="delpic(this,'${ret.url}')" style="position: absolute;right: 2px;top: 2px;color:white;font-size: 20px;">X<strong>
            </div>
        `;
        imglist.append(html);
    });



    //删除图片
    function delpic(obj,picurl){
        let url = "{{ route('admin.fangowner.delfile') }}?file="+picurl;
        //发起请求删除
        fetch(url);
        //删除当前点击图片显示
        $(obj).parent().remove();
        //修改隐藏域表单
        $('#pic').val($('#pic').val().replace(`#${picurl}`,''));
    }


    // 单选框样式
    $('.skin-minimal input').iCheck({
        checkboxClass: 'icheckbox-blue',
        radioClass: 'iradio-blue',
        increaseArea: '20%'
    });


    ;

    // var index = parent.layer.getFrameIndex(window.name);
    // parent.$('.btn-refresh').click();
    // // parent.layer.close(index);
</script>
</body>
</html>